<template>
	<!-- 
	is_refund： 1 正常 2 申请退款 3退款成功 4驳回申请退款
	is_pay: 0 待结算 1 已结算
	order_status： 2 待服务，2.1 待服务（催单），2.2 施工中， -1 已取消， 3 已完成
	 -->
	<view class="detail">
		<view class="" v-if="loading">
			<view class="w96 radius20  mt20 card-wrap">
				<block v-if="detail.is_refund==2">
					<view class="flex">
						<image src="@/static/order/time.png" mode="" class="imgs">
						</image>
						<text style="color: #000;">退款处理中</text>
					</view>
					<view class="mt20 buttons" style=" ">
						退款申请已交由平台处理
					</view>
					<view class="flex-between mt20">
						<view class="">
							退款金额
						</view>
						<view class="">
							￥{{detail.pay_money||500.00}}
						</view>
					</view>
				</block>
				<block v-else-if="detail.is_refund==3">
					<view class="flex">
						<image src="@/static/order/time.png" mode="" class="imgs">
						</image>
						<text style="color: #000;">退款成功</text>
					</view>
					<view class="mt20 buttons" style=" ">
						双方已协商一致退款
					</view>
					<view class="flex-between mt20">
						<view class="">
							退款金额
						</view>
						<view class="">
							￥{{detail.pay_money||500.00}}
						</view>
					</view>
				</block>
				<block v-else>
					<block v-if="detail.is_pay==1">
						<view class="flex">
							<image src="@/static/order/tuik.png" mode="" class="imgs">
							</image>
							<text style="color: #000;">已结束</text>
						</view>
						<view class="mt20 buttons" style=" ">
							已完成本次服务
						</view>
					</block>
					<block v-else>
						<block v-if="detail.order_status==1">
							<view class="flex">
								<image src="@/static/order/time.png" mode="" class="imgs">
								</image>
								<text style="color: #000;">待中选</text>
							</view>
							<view class="mt20 buttons">
								您已成功报价，等待客户选择
							</view>
						</block>
						<block v-if="detail.order_status==2">
							<view class="flex">
								<image src="@/static/order/tuik.png" mode="" class="imgs">
								</image>
								<text style="color: #000;">待服务</text>
							</view>
							<view class="mt20 buttons" style=" ">
								等待您上门服务
							</view>
						</block>
						<block v-if="detail.order_status==2.1">
							<view class="flex">
								<image src="@/static/order/tuik.png" mode="" class="imgs">
								</image>
								<text style="color: #000;">待服务</text><text style="color: red;">(顾客催单)</text>
							</view>
							<view class="mt20 buttons" style=" ">
								等待您上门服务
							</view>
						</block>
						<block v-if="detail.order_status==2.2">
							<view class="flex">
								<image src="@/static/order/gun.png" mode="" class="imgs">
								</image>
								<text style="color: #000;">施工中</text>
							</view>
							<view class="mt20 buttons" style=" ">
								等待您施工完成
							</view>
						</block>
						<block v-if="detail.order_status==3&& detail.is_pay==0">
							<view class="flex">
								<image src="@/static/order/money.png" mode="" class="imgs">
								</image>
								<text style="color: #000;">待结算</text>
							</view>
							<view class="mt20 buttons" style=" ">
								订单已完成，等待客户进行结算支付
							</view>
						</block>
						<block v-if="detail.order_status==-1">
							<view class="flex">
								<image src="@/static/order/money.png" mode="" class="imgs">
								</image>
								<text style="color: #000;">已取消</text>
							</view>
							<view class="mt20 buttons" style=" ">
								订单已被取消，取消原因: {{ detail.quxiao_yuanyin}}
							</view>
						</block>
					</block>
				</block>


			</view>
			<view class="w96 radius20 bgwhite mt20" style="padding:40rpx;">
				<view class="flex">
					<view class="" style="width: 40rpx;margin-right: 30rpx;">
						<image src="@/static/order/dw.png" mode="" style="width: 40rpx; height: 40rpx;">
						</image>
					</view>
					<text
						style="color: #000;font-size: 26rpx;">{{ detail.province+ detail.city+ detail.area + detail.address||'用户具体地址(需要用户手动填写，精确到门牌号)'}}</text>
				</view>
					<!-- {{ detail.user.nickname +'   ' + '('+ detail.user.mobile +')' ||'用户名( 0123456789)'}} -->
				<view class="mt20" style="color: #c1c1c1;font-size: 24rpx;margin-left: 70rpx;">
					{{ detail.contacts +'   ' + '('+ detail.order_cell_phone +')' ||'用户名( 0123456789)'}}
				</view>
			</view>
			<view class="w96 radius20 bgwhite mt20" style="padding:40rpx;"
				v-if="detail.order_status==3&& detail.is_pay==0 && formatArr.length">
				<view class="">施工照片</view>
				<view class="flex" style="margin:16rpx;" @click="pre(formatArr)">
					<view class="" style="height: 100rpx;background-color: #c1c1c1;margin: 0 6rpx;"
						v-for="i in formatArr" :key="i">
						<image :src="i" style="width: 100rpx;height: 100rpx;"></image>
					</view>
				</view>
			</view>
			<view class="w96 radius20 bgwhite mt20" style="padding:40rpx;" v-if="detail.order_status == 1">
				<view class="flex-between">
					<view class="">你的报价</view>
					<view class="">￥{{ detail.baojia.price||"500.00"}}</view>
				</view>
				<!-- <view class="flex-between">
					<view class="">维修</view>
					<view class="">X1</view>
				</view>
				<view class="flex-between">
					<view class="">安装</view>
					<view class="">X1</view>
				</view> -->
			</view>
			<view class="w96 radius20 bgwhite mt20" style="padding:30rpx;">
				<view class="flex" style="padding: 20rpx;align-items: center;position: relative;">
					<image :src="detail.goods_photo.split(',')[0]" v-if="detail.goods_photo.split(',')[0]" class="goods_photo"></image>
					<image src="@/static/lg.png" v-else class="goods_photo"></image>
					<text style="font-size: 24rpx;">{{detail.category_name||'家具维修'}}</text>
					<view class="" style="position:absolute;right: 30rpx;height: 20rpx;font-size: 24rpx;">
						数量 X{{detail.goods_number||1}}
					</view>
				</view>
				<view class="flex-between" style="padding: 20rpx; ">
					<text class="font-blod">商品类型</text>
					<text class="font-blod">{{detail.goods_name||'橱柜'}}</text>
				</view>
				<view class="flex-between" style="padding: 20rpx; ">
					<text class="font-blod">商品数量</text>
					<text class="font-blod">{{detail.goods_number||1}}套</text>
				</view>
				<block v-if="detail.refund_remark">
					<view class="flex-between" style="padding: 20rpx; ">
						<text class="font-blod">退款原因</text>
						<text class="font-blod">{{detail.refund_remark||'退款原因'}}</text>
					</view>
				</block>
				<block v-if="detail.goods_photo.length && detail.goods_photo.split(',').length && detail.goods_photo.split(',')[0].length">
					<view class="flex-between" style="padding: 20rpx; align-items: center;">
						<text class="font-blod">商品照片</text>
						<view class="flex">
							<view class=""
								style="width: 100rpx;height: 100rpx;background-color: #c1c1c1;margin: 0 6rpx;"
								v-for="i in detail.goods_photo.split(',')" :key="i" @click="pre(detail.goods_photo.split(','))">
								<image :src="i" mode="" style="width: 100rpx;height: 100rpx;"></image>
							</view>
						</view>
					</view>
					<view class="flex-between" style="padding: 20rpx; ">
						<text class="font-blod">需求说明</text>
						<text class="font-blod">{{detail.goods_remark ||"用户具体需求说明"}}</text>
					</view>
				</block>

				<view class="flex-between" style="padding: 20rpx; ">
					<text class="font-blod">订单编号</text>
					<view>
						<text class="font-blod">{{detail.order_sn ||2024112101234567}}</text>
						<text style="font-size: 24rpx;color: #CEEE5B;padding-left: 10rpx;"
							@click="copy(detail.order_sn)">复制</text>
					</view>
				</view>
				<view class="flex-between" style="padding: 20rpx; ">
					<text class="font-blod">下单时间</text>
					<text class="font-blod">{{format(detail.createtime*1000) ||'2024-12-21 17：00'}}</text>
				</view>
				<view class="flex-between" style="padding: 20rpx; ">
					<text class="font-blod">期望上门时间</text>
					<text class="font-blod">{{ detail.datetime || '2024-12-21 12：00-14：00'}}</text>
				</view>
			</view>
			<view class="w96 radius20 bgwhite mt20" v-if="detail.is_refund==1 && detail.order_status != 1">
				<!-- v-if="type ==1||type==2||type==3||type==4"  -->
				<view class="w94" style="padding:30rpx 40rpx;border-bottom:2rpx solid #eee;">
					合计
				</view>
				<view class="w94" style="padding-left: 40rpx;">
					<view class="" style="line-height:2;font-size: 26rpx;">
						{{detail.category_name||'维修'}}
					</view>
					<view class="flex" style="line-height:2;justify-content: flex-end;align-items: center;">
						<text style="font-size: 24rpx;">到手合计:</text> <text style="color: red;font-size: 24rpx;">￥</text>
						<text style="color: red;font-size: 34rpx;">{{detail.pay_money||500.00}}</text>
					</view>
				</view>
			</view>
			<block v-if="detail.is_refund==2">
				<view class="flex-between bottom-bg" style=" ">
					<u-icon name="/static/order/share.png" label="平台介入" labelPos="bottom" labelSize="12px"
						@click="ptjr"></u-icon>
					<view class="button" style=" " @click="changeType(detail.is_refund,'bhsq')">
						驳回申请
					</view>
				</view>
			</block>
			<block v-else-if="detail.is_refund==3">
				<view class="flex-center bottom-bg" style=" ">
					<view class="button" style=" " @click="changeType(detail.is_refund,'fhsy')">
						返回首页
					</view>
				</view>
			</block>
			<block v-else>
				<block v-if="detail.is_pay==1">
					<view class="flex-center bottom-bg" style=" ">
						<view class="button" style=" " @click="changeType(detail.is_pay,'cksr')">
							查看收入
						</view>
					</view>
				</block>
				<block v-else>
					<block v-if="detail.order_status==2">
						<view class="flex-center bottom-bg">
							<view class="button" @click="changeType(detail.order_status,'wysm')">
								我已上门
							</view>
						</view>
					</block>
					<block v-if="detail.order_status==2.2">
						<view class="flex-center bottom-bg">
							<view class="button" @click="changeType(detail.order_status,'sgwb')">
								我已施工完毕
							</view>
						</view>
					</block>
					<block v-else-if="detail.is_pay==0&& detail.order_status==3">
						<view class="flex-center bottom-bg" style=" ">
							<view class="button" style=" " @click="changeType(detail.is_pay,'lxkh')">
								联系客户
							</view>
						</view>
					</block>
				</block>
			</block>
		</view>
		<view v-else>
			<u-loading-page :loading="!loading" iconSize="45" fontSize="30"></u-loading-page>
		</view>
		<u-popup :show="show" @close="show=false" mode="bottom">
			<view style="min-height: 600rpx;padding: 30rpx;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">上传现场照片</text>
					<text style="font-size: 28rpx;color: #848484;">请您在服务订单前拍摄现场照片并上传</text>
				</view>
				<view class="flex" style="justify-content: space-evenly;flex-wrap: wrap;margin: 40rpx 0;">
					<block class="" v-if="upLoadArr.length">
						<view class="flex-center"
							style="width:calc(100%/2 - 20rpx);height: 300rpx;border-radius: 20rpx;background-color: #F7FCE6;margin: 5rpx;"
							v-for="i in upLoadArr" :key="i">
							<view style="width:100%;height: 300rpx;">
								<image :src="i" mode="" style="width:100%;height: 300rpx;">
								</image>
							</view>
						</view>
					</block>
					<block class="" v-else>
						<view class="flex-center"
							style="width:calc(100%/2 - 20rpx);height: 300rpx;border-radius: 20rpx;background-color: #F7FCE6;margin: 5rpx;"
							v-for="i in 4" :key="i" @click="chooseImg">
							<view class="flex-center"
								style="width: 100rpx; height: 100rpx;border-radius: 50%;background-color: #CEEE5B;">
								<image src="@/static/order/carm.png" mode="" style="width: 60rpx; height: 60rpx;">
								</image>
							</view>
						</view>
					</block>
				</view>
				<view class="submit" @click="submitData">
					立即上传
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" @close="show2=false" mode="bottom">
			<view style="min-height: 600rpx;padding: 30rpx;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">说明拒绝退款原因</text>
				</view>
				<view class="" style="padding: 15rpx;">
					<u--textarea v-model="note" placeholder="请说明拒绝理由!" :height="290"></u--textarea>
				</view>
				<view class="bot-button-bg" style="box-shadow: none;">
					<view class="button" style="width: 100%;" @click="submitRefu">
						立即提交
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="stepShow" @close="stepShow=false" mode="bottom">
			<view style="min-height: 600rpx;padding: 30rpx;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">报价进度</text>
				</view>
				<mystep :steps="[{title:'已下单'},{title:'已出库'},{title:'已到货'}]" :activeStepIndex="1"></mystep>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		orderDetail,
		cancel_order,
		uploadFiles
	} from '@/common/teacherReq';
	import mystep from '@/components/mystep.vue'
	export default {
		data() {
			return {
				type: 1, // 1:待服务  2：施工中 3：待结算  4：已结束 5：退款中 6：退款成功 7：待中选
				show: false,
				show2: false,
				stepShow: false,
				va: '',
				radiolist7: [{
						name: '可爱',
						disabled: false
					},
					{
						name: '一般',
						disabled: false
					},
					{
						name: '不可爱',
						disabled: false
					},
				],
				detail: {},
				upLoadArr: [
					// "http://192.168.110.110:8080/uploads/20250115/6c663347b7c4b229aaf2c2b688348ee1.jpg",
					// "http://192.168.110.110:8080/uploads/20250115/03d95c839bff93971b55c518c2e38815.png",
					// "http://192.168.110.110:8080/uploads/20250115/69e2ba4435228f72e718f30c0a54eefd.jpeg",
					// "http://192.168.110.110:8080/uploads/20250115/c69e1252fed719faafa0935ef64a4fa3.png",
				],
				loading: false,
				note: ''
			}
		},
		computed: {
			formatArr() {
				if (this.detail && this.detail.success_photo && this.detail.success_photo.length) {
					// 将 this.detail.success_photo 解析为 JSON 对象并返回
					return this.detail.success_photo.split(',')
					// return JSON.parse(JSON.stringify(this.detail.success_photo.replaceAll('&quot;', '')))
				}
				// 如果条件不满足，返回 undefined
				return []
			}
		},
		components: {
			mystep
		},
		methods: {
			changeType(value, name) {
				// this.type++
				// if (this.type > 7) this.type = 1
				if (value == 0 && name == 'lxkh') {
					// cancel_order({
					// 	order_id: this.detail.id,
					// 	status: 2.2,
					// })
					uni.switchTab({
						url: '/pages/message/index'
					})
				} else if (value == 1 && name == 'cksr') {
					// this.toPage('/subpack/user/list/ordercount')
					cancel_order({
						order_id: this.detail.id,
						status: 2,
					})
				} else if (value == 2 && name == 'wysm') {
					cancel_order({
						order_id: this.detail.id,
						status: 2.2,
					}).then(() => {
						uni.showToast({
							title: '已到达',
							success() {
								uni.switchTab({
									url: '/pages/order/index'
								})
							}
						})
					}).catch(() => {
						uni.showToast({
							title: '失败',
							icon: 'error',
							success() {
								uni.switchTab({
									url: '/pages/order/index'
								})
							}
						})
					})
				} else if (value == 2 && name == 'bhsq') {
					this.show2 = true
					// cancel_order({
					// 	order_id: this.detail.id,
					// 	status: 4,
					// }).then(() => {
					// 	uni.showToast({
					// 		title: '驳回申请',
					// 		success() {
					// 			uni.switchTab({
					// 				url: '/pages/order/index'
					// 			})
					// 		}
					// 	})
					// }).catch(() => {
					// 	uni.showToast({
					// 		title: '失败',
					// 		icon: 'error',
					// 		success() {
					// 			uni.switchTab({
					// 				url: '/pages/order/index'
					// 			})
					// 		}
					// 	})
					// })
				} else if (value == 2.2 && name == 'sgwb') {
					this.show = true
					// cancel_order({
					// 	order_id:this.detail.id,
					// 	status:2,
					// })
				} else if (value == 3 && name == 'fhsy') {
					uni.switchTab({
						url: '/pages/order/index'
					})
				}
			},
			ptjr() {
				// this.show2 = true
				uni.switchTab({
					url: '/pages/message/index'
				})
			},
			showStep() {
				this.stepShow = true
			},
			getDetail(id) {
				orderDetail({
					id,
				}).then(res => {
					this.detail = res.data.order_info
				}).catch(err => {

				}).finally(() => {
					setTimeout(() => {
						this.loading = true
					}, 1500)
				})
			},
			copy(e) {
				uni.setClipboardData({
					data: e
				})
			},
			format(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始，所以要加1
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
				const formattedDate = `${year}年${month}月${day}日   ${hours}:${formattedMinutes}`;
				return formattedDate

			},
			chooseImg() {
				uni.chooseImage({
					count: 4,
					success: (res) => {
						uploadFiles({
							filePaths: res.tempFilePaths
						}).then(resp => {
							this.upLoadArr = resp.map(item => item.data.fullurl)
						})
					}
				})
			},
			submitData() {
				if (this.upLoadArr.length) {
					cancel_order({
						order_id: this.detail.id,
						status: 3,
						success_photo: this.upLoadArr
					}).then(() => {
						uni.showToast({
							title: '已完成',
							success() {
								uni.switchTab({
									url: '/pages/order/index'
								})
							}
						})
					}).catch(() => {
						uni.showToast({
							title: '失败',
							icon: 'error',
							success() {
								uni.switchTab({
									url: '/pages/order/index'
								})
							}
						})
					})
				}
			},
			pre(arr) {
				uni.previewImage({
					urls: arr
				})
			},
			submitRefu() {
				if (!this.note.length) {
					uni.showToast({
						title: '拒绝理由不能为空',
						icon: 'error'
					})
					return
				}
				cancel_order({
					order_id: this.detail.id,
					refund: 4,
					content: this.note
				}).then(() => {
					uni.showToast({
						title: '提交成功',
						success() {
							uni.switchTab({
								url: '/pages/order/index'
							})
						}
					})
				}).catch(() => {
					uni.showToast({
						title: '失败',
						icon: 'error',
						success() {
							uni.switchTab({
								url: '/pages/order/index'
							})
						}
					})
				})
			}
		},
		onLoad(opt) {
			this.getDetail(opt.id)
			// this.type = opt.type
			this.type = 1
			// console.log(opt,opt,'type',this.type)
			// console.log(opt,opt.type,'type',this.type)
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		padding-bottom: 180rpx;

		.card-wrap {
			padding: 40rpx;
			background: linear-gradient(to right, #E7F7BC, 50%, #CEEE5B);

			.imgs {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;
			}
		}

		.buttons {
			color: #5C6D08;
			font-size: 24rpx;
		}

		.font-blod {
			font-weight: bold;
			font-size: 24rpx;
		}

		.bottom-bg {
			width: 100%;
			box-shadow: 1px -5px 10px #ccc;
			position: fixed;
			bottom: 0;
			padding: 30rpx;
			background-color: #fff;

		}

		.button {
			width: 80%;
			height: 90rpx;
			border-radius: 90rpx;
			background-color: #CEEE5B;
			text-align: center;
			line-height: 2.5;
		}

		.submit {
			height: 90rpx;
			border-radius: 90rpx;
			background-color: #CEEE5B;
			text-align: center;
			line-height: 2.5;
		}

		.goods_photo {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			background-color: #c1c1c1;
			border-radius: 10rpx;
		}

		.bot-button-bg {
			box-shadow: 1px -5px 10px #ccc;
			position: sticky;
			bottom: 0;
			padding: 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.button {
				width: 80%;
				height: 90rpx;
				border-radius: 90rpx;
				background-color: #CEEE5B;
				text-align: center;
				line-height: 2.5;
			}

			.w50 {
				width: 45%;
			}

			.dis {
				background-color: #f3f3f3;
			}
		}
	}
</style>